<template>
  <view>
    <my-detail :detail="detail"></my-detail>
    <my-post v-for="(item,index) in post" :key="index" :post="item"></my-post>
    <view class="detail-box m-t-40">
      <view class="detail-tabbar flex-a m-b-20">
        <view @click="checkActive(0)" :class="['f-s-16', 'f-w',activeIndex===0?'active':'']">默认</view>
        <view @click="checkActive(1)" :class="['f-s-16', 'f-w',activeIndex===1?'active':'']">最新</view>
      </view>
      <view v-show="activeIndex===0">
        <block v-for="(item,index) in defaultList" :key="index">
          <my-message @changeUnlike="changeUnlike" @changeLike="changeLike" @changeConcern="changeConcern"
            :info="item"></my-message>
        </block>
      </view>
      <view v-show="activeIndex===1">
        <block v-show="activeIndex===1" v-for="(item,index) in newList" :key="index">
          <my-message @changeUnlike="changeUnlike" @changeLike="changeLike" @changeConcern="changeConcern"
            :info="item"></my-message>
        </block>
      </view>
    </view>
    <view class="grey-light-bg-color t-a-c l-h-80" style="height: 80rpx;">已经到底了</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: 0,
        defaultList: [{
          id: 1,
          headImg: "/static/logo.png", //头像
          name: "冯凯隆", //昵称
          time: new Date(), //发布时间
          Concern: true, //是否关注
          content_text: '测试内容111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111', //内容
          content_img: null,
          like: 2, //点赞数量
          unLike: 0, //踩数量
          message: 3 //留言数量
        }, {
          id: 2,
          headImg: "/static/logo.png", //头像
          name: "刘亦菲", //昵称
          time: new Date(), //发布时间
          Concern: true, //是否关注
          content_text: '2222222222222222222222222222222222222', //内容
          content_img: null,
          like: 0, //点赞数量
          unLike: 4, //踩数量
          message: 10 //留言数量
        }, {
          id: 3,
          headImg: "/static/logo.png", //头像
          name: "测试姓名3", //昵称
          time: new Date(), //发布时间
          Concern: false, //是否关注
          content_text: '33333333333333333333333333333333333333333333333333333333333', //内容
          content_img: "/static/test.jpg",
          like: 5, //点赞数量
          unLike: 7, //踩数量
          message: 0 //留言数量
        }],
        newList: [{
          id: 1,
          headImg: "/static/logo.png", //头像
          name: "测试姓名1", //昵称
          time: new Date(), //发布时间
          Concern: true, //是否关注
          content_text: '测试内容111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111', //内容
          content_img: null,
          like: 2, //点赞数量
          unLike: 0, //踩数量
          message: 3 //留言数量
        }, {
          id: 2,
          headImg: "/static/logo.png", //头像
          name: "测试姓名2", //昵称
          time: new Date(), //发布时间
          Concern: true, //是否关注
          content_text: '2222222222222222222222222222222222222', //内容
          content_img: null,
          like: 0, //点赞数量
          unLike: 4, //踩数量
          message: 10 //留言数量
        }, {
          id: 3,
          headImg: "/static/logo.png", //头像
          name: "测试姓名3", //昵称
          time: new Date(), //发布时间
          Concern: false, //是否关注
          content_text: '33333333333333333333333333333333333333333333333333333333333', //内容
          content_img: "/static/test.jpg",
          like: 5, //点赞数量
          unLike: 7, //踩数量
          message: 0 //留言数量
        }],
        detail: {
          name: '刘亦菲',
          image: '/static/default.png',
          desc: '话题描述',
          all: 999,
          today: 5
        },
        post: [{
            title: '新人必读',
            text: 'uni-app实战第二季撒盛大私服哈桑你擦说出你的内粗'
          },
          {
            title: '话题头条',
            text: 'uni-app实战第二季撒盛大私服哈桑你擦说出你的内粗'
          }
        ]
      };
    },
    methods: {
      checkActive(index) {
        this.activeIndex = index
      },
      // 关注或者取关
      changeConcern(id) {
        if (this.activeIndex === 0) {
          this.defaultList.forEach(item => {
            if (item.id === id) {
              item.Concern = !item.Concern
              uni.$showMsg(item.Concern ? "关注成功~" : "取消关注")
              // 之后还要向后端发送请求
            }
          })
        } else {
          this.newList.forEach(item => {
            if (item.id === id) {
              item.Concern = !item.Concern
              uni.$showMsg(item.Concern ? "关注成功~" : "取消关注")
              // 之后还要向后端发送请求
            }
          })
        }
      },
      // 点赞和取消点赞
      changeLike(data) {
        if (this.activeIndex === 0) {
          this.defaultList.forEach(item => {
            if (item.id === data.id) {
              if (data.flag) {
                item.like++
                uni.$showMsg("点赞成功~")
              } else {
                item.like--
                uni.$showMsg("取消点赞")
              }
              // 之后还要向后端发送请求
            }
          })
        } else {
          this.newList.forEach(item => {
            if (item.id === data.id) {
              if (data.flag) {
                item.like++
                uni.$showMsg("点赞成功~")
              } else {
                item.like--
                uni.$showMsg("取消点赞")
              }
              // 之后还要向后端发送请求
            }
          })
        }
      },
      // 踩和取消
      changeUnlike(data) {
        if (this.activeIndex === 0) {
          this.defaultList.forEach(item => {
            if (item.id === data.id) {
              if (data.flag) {
                item.unLike++
                uni.$showMsg("感谢反馈")
              } else {
                item.unLike--
                uni.$showMsg("取消不喜欢")
              }
              // 之后还要向后端发送请求
            }
          })
        } else {
          this.newList.forEach(item => {
            if (item.id === data.id) {
              if (data.flag) {
                item.unLike++
                uni.$showMsg("感谢反馈")
              } else {
                item.unLike--
                uni.$showMsg("取消不喜欢")
              }
              // 之后还要向后端发送请求
            }
          })
        }
      },
    },
    onReachBottom() {
      //上拉加载更多
      if (this.activeIndex === 0) {
        console.log(111)
      } else {
        console.log(222)
      }
    },
    onLoad(options) {
      console.log(options)
    }
  }
</script>

<style lang="scss">
  .active {
    font-size: 20px;
    color: #FD587B;
  }
</style>